import React from 'react'
import { Button, Dropdown, Space, message } from 'antd'
import { DownOutlined, UserOutlined } from '@ant-design/icons'
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from '@/store'
import { setTabsList } from '@/store/modules/tabs'
import { HOME_URL } from '@/config/config'

import { useLocation,useNavigate } from 'react-router-dom'

export default function MoreButton (props) {
  const { t } = useTranslation();
  const { pathname } = useLocation()
  const navigate = useNavigate()
  const { tabsList } = useSelector((state) => state.tabs)
  const dispatch = useDispatch()

  const closeMultipleTab = (tabPath) => {
    // 关闭其他tab，把store里面的tab重新更新
    const newTabsList = tabsList.filter(
      (item) => item.path === tabPath || item.path === HOME_URL
    )
    dispatch(setTabsList(newTabsList))
    tabPath ?? navigate(HOME_URL)
  }
  const handleMenuClick = (e) => {
    if (e.key === '1') {
      props.delTabs(pathname)
    }
    if (e.key === '2') {
      closeMultipleTab(pathname)
    }
    if (e.key === '3') {
      closeMultipleTab()
    }
  }
  const items = [
    {
      label: '关闭当前',
      key: '1',
    },
    {
      label: '关闭其他',
      key: '2',
    },
    {
      label: '关闭所有',
      key: '3',
      danger: true,
    },
  ]
  const menuProps = {
    items,
    onClick: handleMenuClick,
  }
  return (
    <Dropdown menu={menuProps}>
      <Button>
        <Space>
          {t("tabs.more")}
          <DownOutlined />
        </Space>
      </Button>
    </Dropdown>
  )
}
